export default function RoadMap() {
  const milestones = [
    {
      quarter: "Q1 2023",
      title: "Project Launch",
      description: "Initial concept development and team formation.",
      completed: true,
    },
    {
      quarter: "Q2 2023",
      title: "DA Service Beta",
      description: "Launch of beta version of our Data Availability service.",
      completed: true,
    },
    {
      quarter: "Q3 2023",
      title: "NFT Platform",
      description: "Release of NFT marketplace and showcase platform.",
      completed: true,
    },
    {
      quarter: "Q4 2023",
      title: "Staking Implementation",
      description: "Introduction of staking mechanisms for token holders.",
      completed: false,
    },
    {
      quarter: "Q1 2024",
      title: "FlyWheel Model",
      description: "Launch of comprehensive FlyWheel economic model.",
      completed: false,
    },
    {
      quarter: "Q2 2024",
      title: "Ecosystem Expansion",
      description: "Partnerships and integration with other Bera projects.",
      completed: false,
    },
  ]

  return (
    <section id="road-map" className="bg-black py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">Road Map</h2>
          <p className="mt-6 text-lg leading-8 text-gray-300">
            Our strategic development plan outlines key milestones and future goals.
          </p>
        </div>

        <div className="mt-16 relative">
          {/* Vertical line */}
          <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-purple-600 to-pink-600 transform -translate-x-1/2 hidden md:block"></div>

          <div className="space-y-12">
            {milestones.map((milestone, index) => (
              <div
                key={index}
                className={`relative md:grid md:grid-cols-2 md:gap-8 md:items-center ${index % 2 === 0 ? "" : "md:rtl"}`}
              >
                {/* Circle on timeline */}
                <div className="absolute left-1/2 top-6 w-6 h-6 rounded-full bg-black border-4 border-purple-600 transform -translate-x-1/2 z-10 hidden md:block"></div>

                <div
                  className={`bg-gray-900/50 p-6 rounded-xl ring-1 ring-gray-800 md:w-full ${index % 2 === 0 ? "md:text-right md:pr-12" : "md:text-left md:pl-12"}`}
                >
                  <span className="inline-flex items-center rounded-md bg-purple-950/50 px-3 py-1 text-sm font-medium text-purple-300 ring-1 ring-inset ring-purple-700">
                    {milestone.quarter}
                  </span>
                  <h3 className="mt-3 text-xl font-semibold text-white">{milestone.title}</h3>
                  <p className="mt-2 text-gray-300">{milestone.description}</p>
                  <div className="mt-4">
                    <span
                      className={`inline-flex items-center text-sm ${milestone.completed ? "text-green-400" : "text-gray-500"}`}
                    >
                      {milestone.completed ? "Completed" : "Upcoming"}
                    </span>
                  </div>
                </div>

                {/* Empty div for layout */}
                <div className="hidden md:block"></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
